<template>
  <div class="teacher">
    <div class="common_showBox bx">
      <div class="common_searchBox br mb14">
        <div class="searchBox longBox bx">
          <img src="static/images/search.png" alt="" srcset="">
          <input type="text" v-model="key" @keydown.13="queryBtn" placeholder="证书编号/工号/姓名">
        </div>
        <el-button type="primary" class="queryBtn" :loading="queryBtnFlag" @click="queryBtn">查询</el-button>
      </div>
      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">教师信息</div>
          <div class="common_title_right">
            <div class="common_title_btn" @click="openLayer">新增</div>
            <div class="common_title_btn" @click="deletBtn">删除</div>
            <div class="common_title_btn">
              <a href="javascript:;" download="teacher_template.csv">下载模版</a>
            </div>
            <div class="common_title_btn updateBtn" @click="openFile">导入信息
              <!-- <input name="file" type="file" @change="chooseFile" /> -->
            </div>
          </div>
        </div>
        <div class="common_form bx">
          <el-table ref="multipleTable" :data="teacherDataList" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" prop="checkFlag"></el-table-column>
            <el-table-column label="序号" prop="num" width="60">

            </el-table-column>
            <el-table-column prop="certificate_no" label="资格证号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="jobno" label="工号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="teacher_name" label="姓名" show-overflow-tooltip></el-table-column>
            <el-table-column prop="work_status" label="属性" show-overflow-tooltip></el-table-column>
            <el-table-column prop="gender" label="性别" show-overflow-tooltip></el-table-column>
            <el-table-column prop="hiredate" label="入职时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cellphone" label="联系电话" show-overflow-tooltip></el-table-column>
            <el-table-column prop="address" label="家庭住址" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="clickBtn" @click="handleEdit(scope.$index, scope.row)">修改</span>
                <span class="clickBtn" @click="handleDelete(scope.$index, scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>

            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页" @click="minPageFlag &&lastPage()" class="common_form_btn_last">

            <div class="common_form_btn_num">{{page}}</div>

            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()" class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="common_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div>
        </div>
      </div>

    </div>
    <div class="common_alertBox addTeacher" v-if="addTeacherFlag">
      <div class="common_alertBox_header" v-if="!modifyFlag">
        <span>新增教师</span>
      </div>
      <div class="common_alertBox_header" v-if="modifyFlag">
        <span>修改教师</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li alert_center ">
          <div class="common_alertBox_li_alert_center ">
            <span class="importentIcon">资格证号：</span>
            <div class="chooseBox paddingInput">
              <input type="text" v-model="teacherData.certificate_no">
            </div>
          </div>

        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">工号：</span>
            <div class="chooseBox paddingInput ">
              <input type="text" v-model="teacherData.jobno">
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">姓名：</span>
            <div class="chooseBox paddingInput">
              <input type="text" v-model="teacherData.teacher_name">
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">属性：</span>
            <div class="chooseBox down hideInput">
              <div class="maskIpnut">{{teacherData.work_status}}</div>
              <selectMk :liDataGet="work_status" @change="change" :chooseType="1" dataType='work_status'></selectMk>
            </div>


          </div>

          <div class="common_alertBox_li_right">
            <span class="importentIcon">性别：</span>
            <div class="chooseBox down hideInput">
              <div class="maskIpnut">{{teacherData.gender}}</div>
              <selectMk :liDataGet="gender" @change="change" dataType='gender'></selectMk>

            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span>入职时间：</span>
            <div class="chooseBox paddingInput date">

              <el-date-picker v-model="teacherData.hiredate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>


          </div>

          <div class="common_alertBox_li_right">
            <span>联系电话：</span>
            <div class="chooseBox paddingInput ">

              <input type="text" v-model="teacherData.cellphone">
            </div>
          </div>
        </div>
        <div class="common_alertBox_li alert_center ">
          <div class="common_alertBox_li_alert_center ">
            <span>家庭住址：</span>
            <div class="chooseBox paddingInput">
              <input type="text" v-model="teacherData.address">
            </div>
          </div>

        </div>
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addTeacherSureBtn" v-if='!modifyFlag'>保存</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addTeacherSureFlag" @click="addTeacherSureBtn"
          v-if='!modifyFlag'>保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="modifySureFlag" @click="modifySureBtn" v-if='modifyFlag'>修改</el-button>
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="modifySureBtn" v-if='modifyFlag'>修改</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
    <div class="common_alertBox updateFilebox" v-if="updateFileFlag">
      <div class="common_alertBox_header">
        <span>导入信息</span>
      </div>
      <div class="common_alertBox_content pushFileBox" v-if="!updateFileSuccessFlag">

        <div class="pushFile  ">{{fileData.name}}
          <input name="file" type="file" @change="chooseFile" />
        </div>
        <ul>仅支持csv格式
          <li>
            <span class="green">必填字段</span>教师名称,资格证书编号,工号,性别,工作状态</li>
          <li>
            <span class="green">性别</span> 可取值:男,女,保密</li>
          <li>
            <span class="green">工作状态</span> 可取值:在职,离职,退休,开除</li>
          <li>
            <span class="green">入职时间示例</span>2012-07-05</li>
        </ul>
      </div>
      <div class="common_alertBox_footer" v-if="!updateFileSuccessFlag">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click='sureUpdateFile'>确定</div>
        <div class="common_alertBox_footer_btn cancelBtn" @click='cancelBtn'>取消</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="sureUpdateFileFlag" @click="sureUpdateFile">确定</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
      <div class="common_alertBox_content updataBox" v-if="updateFileSuccessFlag">
        <span>总共{{updateFileSuccessData.data.total}}条</span>
        <span class="green">成功{{updateFileSuccessData.data.success}}条</span>
        <span class="red">失败{{updateFileSuccessData.data.failed}}条</span>
        <div v-if="updateFileSuccessData.data.failed>0">
          <!-- <div v-for="(item, index) in updateFileSuccessData.data.failedList" class="red"> -->
          <!-- 失败原因:{{item.data}}({{item.reason}}) -->
          <div class="thead">
            <div class="th">错误信息</div>
            <div class="th">错误原因</div>
          </div>
          <div class="tbody">
            <div class="tr" v-for="(item, index) in updateFileSuccessData.data.failedList">
              <div class="td">{{item.data}}</div>
              <div class="td">{{item.reason}}</div>
            </div>
          </div>

          <!-- </div> -->
        </div>
      </div>
      <div class="common_alertBox_footer" v-if="updateFileSuccessFlag">
        <div class="common_alertBox_footer_btn sureBtn" @click='cancelBtn'>确定</div>
        <div class="common_alertBox_footer_btn cancelBtn" @click='cancelBtn'>取消</div>
      </div>
    </div>
  </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config";

  export default {
    name: 'teacher',
    data() {
      return {
        work_status: [{
          value: '在职'
        }, {
          value: '离职'
        }, {
          value: '退休'
        }, {
          value: '开除'
        }],
        changeIndex:0,
        gender: [{
          value: '男'
        }, {
          value: '女'
        }, {
          value: '保密'
        }],
        fileData: {
          name: '选取文件'
        },
        queryBtnFlag: false,
        addTeacherSureFlag: false,
        sureUpdateFileFlag: false,
        modifySureFlag: false,
        addTeacherFlag: false,
        modifyFlag: false,
        page: 1,
        pagesize: 10,
        minPageFlag: false,
        maxPageFlag: true,
        totalPage: 5,
        updateFileFlag: false,
        updateFileSuccessFlag: false,
        updateFileSuccessData: {},
        value1: '',
        teacherDataList: [{"id":26,"teacher_name":"威整天","certificate_no":"ZS100122","jobno":"G10012","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":1},{"id":25,"teacher_name":"李小蛋","certificate_no":"ZS10011","jobno":"G10011","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":2},{"id":24,"teacher_name":"李三蛋","certificate_no":"ZS10010","jobno":"G10010","gender":"保密","cellphone":"","address":"天门前一条街","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":3},{"id":23,"teacher_name":"李允蛋","certificate_no":"ZS10009","jobno":"G10009","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"开除","genderNum":"3","work_statusNum":"4","num":4},{"id":22,"teacher_name":"李林蛋","certificate_no":"ZS10008","jobno":"G10008","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":5},{"id":21,"teacher_name":"李雪蛋","certificate_no":"ZS10007","jobno":"G10007","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":6},{"id":20,"teacher_name":"李风蛋","certificate_no":"ZS10006","jobno":"G10006","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"退休","genderNum":"3","work_statusNum":"3","num":7},{"id":19,"teacher_name":"李牛蛋","certificate_no":"ZS10005","jobno":"G10005","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":8},{"id":18,"teacher_name":"李马蛋","certificate_no":"ZS10004","jobno":"G10004","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"离职","genderNum":"3","work_statusNum":"2","num":9},{"id":17,"teacher_name":"李中蛋","certificate_no":"ZS10003","jobno":"G10003","gender":"保密","cellphone":"","address":"","hiredate":"0000-00-00","work_status":"在职","genderNum":"3","work_statusNum":"1","num":10}], //列表数据
        key: '',
        teacherData: {
          teacher_name: "",
          certificate_no: "",
          jobno: "",
          work_status: '在职',
          work_statusNum: 1,
          gender: "保密",
          genderNum: "3",
          hiredate: null,
          cellphone: "",
          address: null,
          key: '',
     
        }, //教师数据
        multipleSelection: [],
        handleEdit(index, row) {
          this.addTeacherFlag = true;
          this.modifyFlag = true;
          this.teacherData = JSON.parse(JSON.stringify(row));
          if (this.teacherData.hiredate == "0000-00-00") {
            this.teacherData.hiredate = '';
          }
          $('.mask').show();
        },
        handleDelete(index, row) {
          var _this = this;
          _this.$confirm('此操作将永久删除(' + row.teacher_name + '), 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {


          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    },
    methods: {
      queryBtn() {
        if (this.key == ''&&this.changeIndex==0) {

        } else {
          this.queryBtnFlag = true;
          this.teacherDataList = [];
          var page = 1;
          var pagesize = this.pagesize;
          this.getData(page, pagesize);
          this.changeIndex=0;
        }


      },
      openFile() {
        this.updateFileFlag = true;
        $('.mask').show();
      },
      chooseFile(e) {
        var _this = this
        let file = e.target.files[0];
        if (file) {
          _this.fileData = file;

        }


      },
      sureUpdateFile() {
        let param = new FormData();
        let file = this.fileData;

        param.append('upload_file', file, file.name) // 通过append向form对象添加数据
        if (file.name == '选取文件') {
          this.$message({
            message: '请选取文件',
            type: 'error'
          });
          return
        }
        // return
        var _this = this;
        _this.sureUpdateFileFlag = true;
        let path = '' + window.location;
        path = path.split('#')[1];
        $.ajax({
          url: http.importTeacher,
          type: "POST",
          data: param,
          headers: {
            'Authorization': _this.$store.state.Authorization + ',path="' + path + '"'
          },
          /**
           *必须false才会自动加上正确的Content-Type
           */
          contentType: false,
          /**
           * 必须false才会避开jQuery对 formdata 的默认处理
           * XMLHttpRequest会对 formdata 进行正确的处理
           */
          processData: false,
          success: function (data) {
            switch (data.status) {
              case 200:

                _this.updateFileSuccessData = data;
                _this.updateFileSuccessFlag = true;
                _this.$message({
                  message: data.message,
                  type: 'success'
                });
                var page = 1;
                var pagesize = _this.pagesize;
                _this.getData(page, pagesize);
                break;
              case 400:

                _this.$message({ //失败返回
                  message: data.message,
                  type: 'error',
                  duration: 1666
                });
                break;
              case 402:

                _this.$message({ //失败返回
                  message: data.message,
                  type: 'error',
                  duration: 1666
                });
                break;
              case 500:

                _this.$message({ //失败返回
                  message: data.message,
                  type: 'error',
                  duration: 1666
                });
                localStorage.removeItem('classlist');
                localStorage.removeItem('info');
                localStorage.removeItem('token');
                _this.$router.push({
                  path: '/login'
                });
                break;
            }




            _this.sureUpdateFileFlag = false;

          },
          error: function (data) {
            //console.log(data)
          }
        });
      },
      change: function (e) {
        //console.log(e)
        switch (e.dataType) {
          case 'work_status':
            this.teacherData.work_status = e.val;
            this.teacherData.work_statusNum = e.index;

            break;
          case 'gender':
            this.teacherData.gender = e.val;
            this.teacherData.genderNum = e.index;

            break;
        }


      },
      openLayer() {
        this.addTeacherFlag = true;
        $('.mask').show();
      },

      deletBtn() {
        var _this = this;
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择教师'
          });
          return;
        }
        var nameStr = '';
        var idStr = '';
        this.multipleSelection.map(function (e) {
          nameStr += e.teacher_name + '、';
          idStr += e.id + ','
        });
        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        //console.log(idStr)
        this.$confirm('此操作将永久删除(' + nameStr + '), 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        let _this = this;
        _this.maxPageFlag = false;
        _this.minPageFlag = false;
        var page = page;
        var pagesize = pagesize;
        // console.log(page + '_' + pagesize)
        var key = _this.key; //关键字


 

      },
      nextPage() {
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() {
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() {
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() {
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      cancelBtn() {
        this.teacherData = {
          teacher_name: "",
          certificate_no: "",
          jobno: "",
          work_status: '在职',
          work_statusNum: 1,
          gender: "保密",
          genderNum: "3",
          hiredate: null,
          cellphone: "",
          address: null,
          key: ''
        }
        this.teacherData.hiredate = this.teacherData.hiredate == '' ? '0000-00-00' : this.teacherData.hiredate;

        this.addTeacherFlag = false;
        this.setTeacherFlag = false;
        this.updateFileFlag = false;
        this.sureUpdateFileFlag = false;
        this.updateFileSuccessFlag = false;
        this.addTeacherSureFlag = false;
        this.modifySureFlag = false;
        this.modifyFlag = false;
        this.fileData = {
          name: '选取文件'
        }

        $('.mask').hide();
      },
      addTeacherSureBtn() {

        if (this.trim(this.teacherData.certificate_no) === '') { //验证非空
          this.$message.error('资格证书编号不能为空');
          return;
        } else if (this.trim(this.teacherData.teacher_name) === '') {
          this.$message.error('名字不能为空');
          return;
        } else if (this.trim(this.teacherData.jobno) === '') {
          this.$message.error('工号不能为空');
          return;
        }
        var _this = this;
        _this.addTeacherSureFlag = true;


      },
      modifySureBtn() {
        var _this = this;
        var id = _this.teacherData.id;

        _this.modifySureFlag = true;

      },
      keyWatch(val) { // 实时监听数据变化
       this.changeIndex++;
      }
    },
    watch: {
      key(val) { // 实时监听数据变化
        this.keyWatch(val)
      }
    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值

      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /* 更正 */

  .common_alertBox.addTeacher {
    width: 894px;
    height: 484px;
  }

  .common_alertBox_content {
    padding: 0 100px;
  }

  .common_alertBox.addTeacher .common_alertBox_li_left {
    width: 56%;
  }

  .common_alertBox.addTeacher .common_alertBox_li_right {
    width: 70%;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .common_alertBox_li_alert_center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .common_alertBox_li_alert_center .chooseBox {
    width: 612px;
  }

  .chooseBox {
    margin: 0;
    width: 226px;
    position: relative;
    /* padding-right: 56px; */
    box-sizing: border-box;

  }

  .pushFileBox {
    position: relative;

  }

  .pushFile {
    margin: 0 auto;
    width: 30%;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    background: #1985ce;
    border-radius: 18px;
    color: #fff;
    position: relative;

  }

  .pushFileBox input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .pushFileBox ul {
    text-align: left;
    border-top: 1px solid #333;
    margin-top: 10px;
  }

  .pushFileBox ul li span.green {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-right: 20px;
  }

  .teacher {
    height: 100%;
    /* overflow-y: scroll; */
  }

  .common_alertBox_footer {
    padding: 35px 275px;
  }

  .common_alertBox_content.updataBox {
    max-height: 300px;
    overflow: auto;
  }

  .common_alertBox ::-webkit-scrollbar {
    display: block;
  }

  /* 更正 */

</style>
